<template>
	<div class="layout">
		<Layout style="height: 100%">
			<Header v-show="false" class="header">
				<Menu mode="horizontal" class="header-menu" theme="primary" @on-select="menuItemSelect">
					<!-- <img  src="../assets/UI/logo.png" /> -->
					<div class="layout-logo">陕西省疫情防控人员轨迹展示系统</div>
					<div class="layout-nav">
						<MenuItem v-for="(item, index) in headerItems" :key="index" :name="item.urlName" :to="{ name: item.urlName }">
							<div
								:class="[
                  'header-item',
                  'itemTitle',
                  item.urlName,
                  { itemTitleActive: item.isActive },
                ]"
							>
								<Icon :type="item.icon" size="30" />
								<span style="margin-top: 5px">{{ item.name }}</span>
							</div>
						</MenuItem>
						<!-- <div class="tab header-item" @click="ripple"></div> -->
					</div>
					<div class="layout-logout">
						<Dropdown trigger="click" @on-click="logoutClick">
							<div>
								<Icon class="name" style="transform: translateY(15%)" color="white" type="ios-person" size="31" />&nbsp;
								<span class="name">{{ name }}</span>
								<Icon type="md-arrow-dropdown" size="20" color="rgb(156,181,177)" />
							</div>
							<DropdownMenu slot="list">
								<DropdownItem name="selfInfo">
									<Icon type="ios-person" />个人资料
								</DropdownItem>
								<DropdownItem name="logout">
									<Icon type="ios-exit" />退出
								</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</div>
				</Menu>
			</Header>
			<Content class="content">
				<transition name="slide-fade">
					<router-view></router-view>
				</transition>
			</Content>
		</Layout>
	</div>
</template>
<script>
import $ from "jquery";
import eventBus from "../bus";
import { mapState } from "vuex";
export default {
	name: "MainPage",
	data() {
		return {
			headerItems: [],
			name: "",
		};
	},
	methods: {
		// 此函数用来修复刷新后激活的Tab复位的问题
		refreshTabPos() {
			let reg = /^\/?.*\//;
			let currentRouter = reg.exec(this.$route.path)[0].slice(1, -1);
			if (!currentRouter) {
				currentRouter = this.$route.name;
			}
			let that = this;

			let currentActiveItem = that.headerItems.find(
				(item) => item.isActive === true
			);
			if (currentActiveItem.urlName !== currentRouter) {
				currentActiveItem.isActive = false;
			}
			that.headerItems.find(
				(item) => item.urlName === currentRouter
			).isActive = true;
		},
		// 像后端查询用户可以使用得菜单和功能，后交给headerChange函数二次处理
		queryAuthList() {
			const self = this;

			// self.headerItems.push(self.headerChange("一张图"));

			self.headerItems.forEach((item, index) => {
				item.tabLeftDistance = index * 12.5;
			});
			self.refreshTabPos();
			// self.axios.get("/authlist").then((res) => {
			//   if (res.data.code == 200) {
			//     let headerAuth = res.data.data.headerItems;
			//     if (headerAuth.length > 0) {
			//       headerAuth.forEach((item) => {
			//         self.headerItems.push(self.headerChange(item));
			//       });
			//       self.headerItems.forEach((item, index) => {
			//         item.tabLeftDistance = index * 12.5;
			//       });
			//       self.refreshTabPos();
			//     } else {
			//       this.$Message.info("用户没有权限");
			//     }
			//   } else {
			//     this.$Message.info("用户不具有权限！");
			//   }
			// });
		},
		/* 
     对后端传过来得数据进行处理，加上属性
     整的前端怪麻烦得 要怪就怪他奇怪的数据库设计吧
    */
		headerChange(input) {
			if (input == "一张图") {
				let temp = {
					name: "陕西省卫健委应急地图 ",
					urlName: "yzt",
					isActive: true,

					icon: "ios-map",
				};
				return temp;
			} else if (input == "资源目录") {
				let temp = {
					name: "资源目录",
					urlName: "zyml",
					isActive: false,

					icon: "ios-folder",
				};
				return temp;
			} else if (input == "在线智图") {
				let temp = {
					name: "在线智图",
					urlName: "zxzt",
					isActive: false,

					icon: "ios-color-palette",
				};
				return temp;
			} else if (input == "应用构建") {
				let temp = {
					name: "应用构建",
					urlName: "yygj",
					isActive: false,

					icon: "ios-appstore",
				};
				return temp;
			} else if (input == "合规检测") {
				let temp = {
					name: "合规检测",
					urlName: "",
					isActive: false,

					icon: "md-bug",
				};
				return temp;
			} else if (input == "典型案例") {
				let temp = {
					name: "典型案例",
					urlName: "dxal",
					isActive: false,

					icon: "logo-codepen",
				};
				return temp;
			} else if (input == "开发中心") {
				let temp = {
					name: "开发中心",
					urlName: "kfzx",
					isActive: false,

					icon: "logo-android",
				};
				return temp;
			} else if (input == "系统管理") {
				let temp = {
					name: "系统管理",
					urlName: "xtgl",
					isActive: false,

					icon: "ios-construct",
				};
				return temp;
			} else {
				let temp = {};
				return temp;
			}
		},

		/* 不再使用，我也不清楚为啥他们不用Flex布局 而采用这种Jquery得方式 
    已被我弃用
    后续组件如果有没改得，就是我懒得重构了 
    resize() {
       $(".content").height(window.innerHeight - 96);
     },
    */

		clearCookie() {
			var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
			if (keys) {
				for (var i = keys.length; i--; ) {
					document.cookie =
						keys[i] + "=0;path=/;expires=" + new Date(0).toUTCString(); //清除当前域名下的,例如：m.kevis.com
					document.cookie =
						keys[i] +
						"=0;path=/;domain=" +
						document.domain +
						";expires=" +
						new Date(0).toUTCString(); //清除当前域名下的，例如 .m.kevis.com
					document.cookie =
						keys[i] +
						"=0;path=/;domain=kevis.com;expires=" +
						new Date(0).toUTCString(); //清除一级域名下的或指定的，例如 .kevis.com
				}
			}
			$("#divcookie").html(document.cookie);
		},
		logoutClick(name) {
			if (name == "selfInfo") {
				this.$router.push({ name: "selfinfo" });
			} else {
				window.sessionStorage.clear();
				location.reload("/login");
				this.clearCookie();
			}
		},
		// 此函数用来改变合规性检测工具集的状态，实际上只是外观，真正的禁用逻辑在菜单点击事件里
		modifyCheckDomState() {
			let checkMenuItemDom = this.$(".ivu-icon-md-bug").parent();
			if (this.$route.name === "yzt") {
				if (this.isShowAnalystTool) checkMenuItemDom.css("color", "#48c9d2");
				else checkMenuItemDom.css("color", "#7a9698");
			} else checkMenuItemDom.css("color", "#4b4e4e");
		},
		menuItemSelect(name) {
			if (name === "" && this.$route.name === "yzt") {
				eventBus.$emit("modifyCheckTool");
				return;
			}
			for (const item of this.headerItems) {
				if (item.urlName === name) {
					item.isActive = true;
				} else {
					item.isActive = false;
				}
			}
		},
		// 按钮点击得水波纹动画
		ripple(e) {
			let url = this.headerItems.find(
				(item) => item.name === e.target.innerText
			).urlName;
			this.$router.push({ name: url });
			let x = e.offsetX;
			let y = e.offsetY;

			let ripples = document.createElement("span");
			ripples.style.left = x + "px";
			ripples.style.top = y + "px";
			ripples.className = "ripples-span";
			$(".tab").append(ripples);
			// $(".tab").addClass("wtf");

			setTimeout(() => {
				ripples.remove();
				$(".tab").removeClass("wtf");
			}, 1000);
		},
	},
	mounted() {
		//this.resize();
		// this.queryAuthList();
		this.name = sessionStorage.getItem("name");
		let self = this;
		// 刷新后也更新工具状态
		setTimeout(function () {
			self.modifyCheckDomState();
		}, 200);
	},
	computed: {
		...mapState({
			isShowAnalystTool: (state) => state.oneMap.isShowAnalystTool,
		}),
		activeIndex() {
			for (const item of this.headerItems) {
				if (item.isActive === true) {
					return item;
				}
			}
			return null;
		},
	},
	watch: {
		activeIndex(newVal) {
			this.$nextTick(() => {
				let activeSpan = $(`.${newVal.urlName}`);
				$(".tab").html(activeSpan.html());
				$(".tab").css("left", `${newVal.tabLeftDistance}%`);
			});
		},
		isShowAnalystTool() {
			this.modifyCheckDomState();
		},
		$route() {
			this.modifyCheckDomState();
		},
	},
};
</script>
<style>
::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
::-webkit-scrollbar-thumb {
	background-color: #dddddd;
	border-radius: 10px;
	min-height: 28px;
}
::-webkit-scrollbar-track-piece {
	background-color: #f8f8f8;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #bbb;
}
:focus {
	outline: none;
}
.ripples-span {
	position: absolute;
	background: #fff;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border-radius: 50%;

	animation: animate 1s linear infinite;
	z-index: 10;
}
.wtf {
	animation: wtf 0.05s linear infinite;
}

@keyframes wtf {
	0% {
		transform: translateX(-2px) translateY(-2px);
	}
	100% {
		transform: translateX(2px) translateY(2px);
	}
}

@keyframes animate {
	0% {
		width: 0px;
		height: 0px;
		opacity: 0.5;
	}
	100% {
		width: 500px;
		height: 500px;
		opacity: 0;
	}
}
</style>
<style lang='scss' scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
	transition: all 0.5s ease;
}
.slide-fade-leave-active {
	transition: all 0.5s ease-in-out;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
	transform: translateX(1000px);
	opacity: 0;
}
.ivu-menu-item {
	padding: 0 !important;
	width: 12.5% !important;
}
.layout {
	height: 100%;
	.header {
		height: 80px;
		.header-menu {
			background: rgb(2, 64, 85);
			box-shadow: 2px 2px 2px rgb(126, 122, 116);
			height: 100%;
			.layout-logo {
				float: left;
				position: relative;
				height: 45px;
				top: 17px;
				left: 31px;
				color: #dfdbdb;
				font-size: 30px;
				line-height: 45px;
			}
			.layout-nav {
				position: absolute;
				height: 100%;
				left: 30.99%;
				width: 48%;
				input {
					display: none;
				}
				.header-item {
					flex-direction: column;
					font-size: 14px;
					display: flex !important;
					justify-content: center;
					align-items: center;
					line-height: 20px;
					height: 80px;
				}
				.itemTitle {
					display: inline-block;
					background: rgb(0, 63, 84);
					color: rgb(122, 150, 152);

					transition: all 0.3s ease-in-out;

					text-align: center;

					&.itemTitleActive {
						&:hover {
							transform: none;
						}
					}
					&:hover {
						& > * {
							transition: all 0.3s ease-in-out;
							transform: scale(1.3);
						}
					}
				}
				.tab {
					overflow: hidden;
					transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
					position: absolute;
					width: 12.5%;
					background: #2d6d79;
					color: white;

					left: 0px;
					color: white;
					cursor: pointer;
					z-index: 3;
					text-align: center;

					&:hover {
						& > * {
							transition: all 0.5s ease-in-out;
							transform: scale(1.3);
						}
					}
				}
			}
			.layout-logout {
				float: right;
				position: relative;
				line-height: 80px;
				right: 30px;
				font-size: 20px;
				color: black;
				cursor: pointer;
				.name {
					color: #9cb5b1;
				}
				.layout-drop {
					display: flex;
				}
			}
		}
	}

	.content {
		flex: 1;
	}
}
</style>
